import {
  WorkspacePanel,
  usePanelContext,
  useXFlowApp,
  useXflowPrefixCls,
  uuidv4
} from '@antv/xflow'
import type { IPosition } from '@antv/xflow'
import { nodelistfromend } from '@/mock/nodelistfromend'
import { useGraphDnd } from './hooks/useGraphDnd'
// import { formatToPanelNode } from '../utils/format'
import PanelNode from './panel-node'
import { Menu } from 'antd'
import { PieChartOutlined } from '@ant-design/icons'
import { NODE_KEY } from '../../constants'

export interface IPanelProps {
  position: IPosition
}

// 节点库
export const NodeCard = () => {
  
  const prefixClz = useXflowPrefixCls('node-panel')
  console.log(prefixClz);
  
  const { graphConfig, onMouseDown, modelService, commandService } =
    useGraphDnd()
  const formatToPanelNode = data => {
    let res = [
      { label: '基础节点', key: 0 }, // 菜单项务必填写 key
      { label: '动作执行', key: 1 }
    ]
    for (const item of data) {
      let target = res.find(itm => itm.key === item.node_type)
      if (!target.children) target.children = []
      target.children.push({
        key: item.id,
        icon: <PieChartOutlined/>,
        label: (
          <div onMouseDown={onMouseDown({id: item.id,label: item.node_name,renderKey: NODE_KEY,data: item})}>{item.node_name}</div>
          // <PanelNode
          //   key={item.id}
          //   onMouseDown={onMouseDown({
          //     id: item.id,
          //     label: item.node_name,
          //     renderKey: NODE_KEY,
          //     data: item
          //   })}
          //   graphConfig={graphConfig}
          //   modelService={modelService}
          //   commandService={commandService}
          //   nodeConfig={{
          //     id: item.id,
          //     label: item.node_name,
          //     renderKey: NODE_KEY,
          //     data: item
          //   }}
          // />
        )
      })
    }
    return res
  }
  const MenuItems = formatToPanelNode(nodelistfromend)

  return (
    <div className="workflow-node-panel">
      <Menu mode="inline" items={MenuItems} />
    </div>
  )
}

export const CustomPanel: React.FC = () => {
  return (
    <div className="card-wrap">
      <NodeCard />
    </div>
  )
}

export default (props: IPanelProps) => {
  return (
    <WorkspacePanel {...props}>
      <CustomPanel />
    </WorkspacePanel>
  )
}
